var che = document.getElementById("che");
var che2 = document.getElementById("che2");
var menu1 = document.getElementsByClassName("menu1");
var menu2 = document.getElementById("menu2");
var menu = document.getElementById("menu");
var menulis = document.querySelectorAll(".menu ul li");
var find = document.getElementById("find");
var sou = document.getElementById("sou");
var sou1 = document.getElementById("sou1");
var btn = document.getElementById("btn");
var menubtn = document.getElementsByClassName("menu-btn");
var menuli = document.querySelectorAll(".menu ul li");
//购物车鼠标浮动事件
che.onmouseenter = function(){
		che2.style.display = "block";
		animate(che2,{height:65},5);
};


//购物车鼠标离开事件
che.onmouseleave = function(){
	che2.style.display = "none";
	animate(che2,{height:0},5);	
};


//搜索框onmousenter事件
find.onmouseenter = function(){
	find.style.borderColor = "#B0B0B0";
	btn.style.borderColor = "#B0B0B0";
}
find.onmouseleave = function(){
	find.style.borderColor = "#E0E0E0";
	btn.style.borderColor = "#E0E0E0";
}


//搜索框点击事件
	find.onfocus = function(){
		find.onmouseenter = function(){
			find.style.borderColor = "#FF6800";
			btn.style.borderColor = "#FF6800";
		}
		find.onmouseleave = function(){
			find.style.borderColor = "#FF6800";
			btn.style.borderColor = "#FF6800";
		}
		sou.style.display = "none";
		sou1.style.display = "none";
		menu2.style.display = "block";
		find.style.borderColor = "#FF6800";
		btn.style.borderColor = "#FF6800";
		menu2.onmouseenter = function(){
			find.style.borderColor = "#FF6800";
			btn.style.borderColor = "#FF6800";
		}
	}


//搜索框内提示小窗触发边框变色
	sou.onmouseenter = function(){
		find.style.borderColor = "#B0B0B0";
		btn.style.borderColor = "#B0B0B0";
	}
	sou1.onmouseenter = function(){
		find.style.borderColor = "#B0B0B0";
		btn.style.borderColor = "#B0B0B0";
	}


//搜索框失去焦点触发事件
	find.onblur = function(){
		find.onmouseenter = function(){
			find.style.borderColor = "#B0B0B0";
			btn.style.borderColor = "#B0B0B0";
		}
		find.onmouseleave = function(){
			find.style.borderColor = "#E0E0E0";
			btn.style.borderColor = "#E0E0E0";
		}
		if(find.value==""){
			find.style.borderColor = "#B0B0B0";
			btn.style.borderColor = "#B0B0B0";
			sou.style.display = "block";
			sou1.style.display = "block";
			menu2.style.display = "none";
		}else{
			sou.style.display = "none";
			sou1.style.display = "none";
			menu2.style.display = "none";
			find.style.borderColor = "#B0B0B0";
			btn.style.borderColor = "#B0B0B0";
		}
	}


//菜单栏显示隐藏菜单
for(var i = 0;i<menu1.length;i++){
	menu1[i].index = i;
	menu1[0].onmouseenter= function(){
		menu.style.display = "block";
		animate(menu,{height:200},5);
		this.firstElementChild.style.color = "#FF6800";
		menu.innerHTML = "";
		ajax({
			method:"get",
			url:"http://127.0.0.1:8020/xiaomi/js/menu1_1.json",
			isAsyc:true,
			success:function(data){
				console.log(data)
				var data1 = JSON.parse(data)
				var ul = document.createElement('ul');
				for(var i=0;i<data1.length;i++){
					var li = document.createElement('li');
					li.innerHTML = '<img src="'+data1[i].list_img+'"/><p><a>'+data1[i].list_name+'</a></p><p>' + data1[i].price + '</p>'
					ul.appendChild(li);
				}
					menu.appendChild(ul);
			}	
		})
	}
	
	menu1[1].onmouseenter= function(){
		menu.style.display = "block";
		animate(menu,{height:200},5);
		this.firstElementChild.style.color = "#FF6800";
		menu.innerHTML = "";
		ajax({
			method:"get",
			url:"http://127.0.0.1:8020/xiaomi/js/menu1_2.json",
			isAsyc:true,
			success:function(data){
				console.log(data)
				var data1 = JSON.parse(data)
				var ul = document.createElement('ul');
				for(var i=0;i<data1.length;i++){
					var li = document.createElement('li');
					li.innerHTML = '<img src="'+data1[i].list_img+'"/><p><a>'+data1[i].list_name+'</a></p><p>' + data1[i].price + '</p>'
					ul.appendChild(li);
				}
					menu.appendChild(ul);
			}	
		})
	}
	
	menu1[2].onmouseenter= function(){
		menu.style.display = "block";
		animate(menu,{height:200},5);
		this.firstElementChild.style.color = "#FF6800";
		menu.innerHTML = "";
		ajax({
			method:"get",
			url:"http://127.0.0.1:8020/xiaomi/js/menu1_3.json",
			isAsyc:true,
			success:function(data){
				console.log(data)
				var data1 = JSON.parse(data)
				var ul = document.createElement('ul');
				for(var i=0;i<data1.length;i++){
					var li = document.createElement('li');
					li.innerHTML = '<img src="'+data1[i].list_img+'"/><p><a>'+data1[i].list_name+'</a></p><p>' + data1[i].price + '</p>'
					ul.appendChild(li);
				}
					menu.appendChild(ul);
			}	
		})
	}
	
	menu1[3].onmouseenter= function(){
		menu.style.display = "block";
		animate(menu,{height:200},5);
		this.firstElementChild.style.color = "#FF6800";
		menu.innerHTML = "";
		ajax({
			method:"get",
			url:"http://127.0.0.1:8020/xiaomi/js/menu1_4.json",
			isAsyc:true,
			success:function(data){
				console.log(data)
				var data1 = JSON.parse(data)
				var ul = document.createElement('ul');
				for(var i=0;i<data1.length;i++){
					var li = document.createElement('li');
					li.innerHTML = '<img src="'+data1[i].list_img+'"/><p><a>'+data1[i].list_name+'</a></p><p>' + data1[i].price + '</p>'
					ul.appendChild(li);
				}
					menu.appendChild(ul);
			}	
		})
	}
	
	menu1[4].onmouseenter= function(){
		menu.style.display = "block";
		animate(menu,{height:200},5);
		this.firstElementChild.style.color = "#FF6800";
		menu.innerHTML = "";
		ajax({
			method:"get",
			url:"http://127.0.0.1:8020/xiaomi/js/menu1_5.json",
			isAsyc:true,
			success:function(data){
				console.log(data)
				var data1 = JSON.parse(data)
				var ul = document.createElement('ul');
				for(var i=0;i<data1.length;i++){
					var li = document.createElement('li');
					li.innerHTML = '<img src="'+data1[i].list_img+'"/><p><a>'+data1[i].list_name+'</a></p><p>' + data1[i].price + '</p>'
					ul.appendChild(li);
				}
					menu.appendChild(ul);
			}	
		})
	}
	
	menu1[5].onmouseenter= function(){
		menu.style.display = "block";
		animate(menu,{height:200},5);
		this.firstElementChild.style.color = "#FF6800";
		menu.innerHTML = "";
		ajax({
			method:"get",
			url:"http://127.0.0.1:8020/xiaomi/js/menu1_6.json",
			isAsyc:true,
			success:function(data){
				console.log(data)
				var data1 = JSON.parse(data)
				var ul = document.createElement('ul');
				for(var i=0;i<data1.length;i++){
					var li = document.createElement('li');
					li.innerHTML = '<img src="'+data1[i].list_img+'"/><p><a>'+data1[i].list_name+'</a></p><p>' + data1[i].price + '</p>'
					ul.appendChild(li);
				}
					menu.appendChild(ul);
			}	
		})
	}
	
	menu1[6].onmouseenter= function(){
		menu.style.display = "block";
		animate(menu,{height:200},5);
		this.firstElementChild.style.color = "#FF6800";
		menu.innerHTML = "";
		ajax({
			method:"get",
			url:"http://127.0.0.1:8020/xiaomi/js/menu1_7.json",
			isAsyc:true,
			success:function(data){
				console.log(data)
				var data1 = JSON.parse(data)
				var ul = document.createElement('ul');
				for(var i=0;i<data1.length;i++){
					var li = document.createElement('li');
					li.innerHTML = '<img src="'+data1[i].list_img+'"/><p><a>'+data1[i].list_name+'</a></p><p>' + data1[i].price + '</p>'
					ul.appendChild(li);
				}
					menu.appendChild(ul);
			}	
		})
	}
	
	menu1[i].onmouseleave = function(){	
			this.firstElementChild.style.color = "#333333";
			animate(menu,{height:0},3,function(){
				menu.style.display = "none";
			});
	}
	menu.onmouseenter = function(){
		menu.style.display = "block";
		animate(menu,{height:200},5);
	}
	menu.onmouseleave = function(){
		animate(menu,{height:0},3,function(){
			menu.style.display = "none";
		});
	}
}	

//侧边栏点击事件

for(var i = 0;i<menubtn.length;i++){
	menubtn[i].index = i;
	var menu3 = document.getElementsByClassName('menu3')[0];
	menubtn[i].onmouseenter = function(){
		this.style.background = "#FF6800";
		menu3.style.display = "block";
		menu3.innerHTML = "";
		ajax({
			method:"get",
			url:"http://127.0.0.1:8020/xiaomi/js/menu3.json",
			isAsyc:true,
			success:function(data){
				console.log(data)
				var data1 = JSON.parse(data)
				var ul = document.createElement('ul');
				if(data1.length<=6){
					for(var i=0;i<data1.length;i++){
						var li = document.createElement('li');
						li.innerHTML = '<img src="'+data1[i].list_img+'"/><a href="#">'+data1[i].list_name+'</a>' + '<a class="a1"><div class="menu3_div">选购</div></a>'
						ul.appendChild(li);
					}
						menu3.appendChild(ul);
				}else{
					for(var i=0;i<6;i++){
						var li = document.createElement('li');
						li.innerHTML = '<img src="'+data1[i].list_img+'"/><a href="#">'+data1[i].list_name+'</a>' + '<a class="a1"><div class="menu3_div">选购</div></a>'
						ul.appendChild(li);
					}
						menu3.appendChild(ul);
					for(var i=6;i<12;i++){
						var li = document.createElement("li");
						li.innerHTML = '<img src="'+data1[i].list_img+'"/><a href="#">'+data1[i].list_name+'</a>' + '<a class="a1"><div class="menu3_div">选购</div></a>'
						ul.appendChild(li);
					}
						menu3.appendChild(ul);
					
				}
				
			},
			error:function(mes){
				alert(mes)
			}	
		})
	}
	menubtn[1].onmouseenter = function(){
		this.style.background = "#FF6800";
		menu3.style.display = "block";
		menu3.innerHTML = "";
		ajax({
			method:"get",
			url:"http://127.0.0.1:8020/xiaomi/js/menu3_1.json",
			isAsyc:true,
			success:function(data){
				console.log(data)
				var data1 = JSON.parse(data)
				var ul = document.createElement('ul');
				if(data1.length<=6){
					for(var i=0;i<data1.length;i++){
						var li = document.createElement('li');
						li.innerHTML = '<img src="'+data1[i].list_img+'"/><a href="#">'+data1[i].list_name+'</a>' + '<a class="a1"><div class="menu3_div">选购</div></a>'
						ul.appendChild(li);
					}
						menu3.appendChild(ul);
				}else{
					for(var i=0;i<6;i++){
						var li = document.createElement('li');
						li.innerHTML = '<img src="'+data1[i].list_img+'"/><a href="#">'+data1[i].list_name+'</a>' + '<a class="a1"><div class="menu3_div">选购</div></a>'
						ul.appendChild(li);
					}
						menu3.appendChild(ul);
					for(var i=6;i<12;i++){
						var li = document.createElement("li");
						li.innerHTML = '<img src="'+data1[i].list_img+'"/><a href="#">'+data1[i].list_name+'</a>' + '<a class="a1"><div class="menu3_div">选购</div></a>'
						ul.appendChild(li);
					}
						menu3.appendChild(ul);
					
				}
				
			},
			error:function(mes){
				alert(mes)
			}	
		})
	}
	menubtn[2].onmouseenter = function(){
		this.style.background = "#FF6800";
		menu3.style.display = "block";
		menu3.innerHTML = "";
		ajax({
			method:"get",
			url:"http://127.0.0.1:8020/xiaomi/js/menu3.json",
			isAsyc:true,
			success:function(data){
				console.log(data)
				var data1 = JSON.parse(data)
				var ul = document.createElement('ul');
				if(data1.length<=6){
					for(var i=0;i<data1.length;i++){
						var li = document.createElement('li');
						li.innerHTML = '<img src="'+data1[i].list_img+'"/><a href="#">'+data1[i].list_name+'</a>'
						ul.appendChild(li);
					}
						menu3.appendChild(ul);
				}else{
					for(var i=0;i<6;i++){
						var li = document.createElement('li');
						li.innerHTML = '<img src="'+data1[i].list_img+'"/><a href="#">'+data1[i].list_name+'</a>' + '<a class="a1"><div class="menu3_div">选购</div></a>'
						ul.appendChild(li);
					}
						menu3.appendChild(ul);
					for(var i=6;i<12;i++){
						var li = document.createElement("li");
						li.innerHTML = '<img src="'+data1[i].list_img+'"/><a href="#">'+data1[i].list_name+'</a>' + '<a class="a1"><div class="menu3_div">选购</div></a>'
						ul.appendChild(li);
					}
						menu3.appendChild(ul);
					
				}
				
			},
			error:function(mes){
				alert(mes)
			}	
		})
	}
	
	menubtn[3].onmouseenter = function(){
		this.style.background = "#FF6800";
		menu3.style.display = "block";
		menu3.innerHTML = "";
		ajax({
			method:"get",
			url:"http://127.0.0.1:8020/xiaomi/js/menu3_1.json",
			isAsyc:true,
			success:function(data){
				console.log(data)
				var data1 = JSON.parse(data)
				var ul = document.createElement('ul');
				if(data1.length<=6){
					for(var i=0;i<data1.length;i++){
						var li = document.createElement('li');
						li.innerHTML = '<img src="'+data1[i].list_img+'"/><a href="#">'+data1[i].list_name+'</a>' + '<a class="a1"><div class="menu3_div">选购</div></a>'
						ul.appendChild(li);
					}
						menu3.appendChild(ul);
				}else{
					for(var i=0;i<6;i++){
						var li = document.createElement('li');
						li.innerHTML = '<img src="'+data1[i].list_img+'"/><a href="#">'+data1[i].list_name+'</a>' + '<a class="a1"><div class="menu3_div">选购</div></a>'
						ul.appendChild(li);
					}
						menu3.appendChild(ul);
					for(var i=6;i<12;i++){
						var li = document.createElement("li");
						li.innerHTML = '<img src="'+data1[i].list_img+'"/><a href="#">'+data1[i].list_name+'</a>' + '<a class="a1"><div class="menu3_div">选购</div></a>'
						ul.appendChild(li);
					}
						menu3.appendChild(ul);
					
				}
				
			},
			error:function(mes){
				alert(mes)
			}	
		})
	}
	menubtn[i].onmouseleave = function(){
		this.style.background = "#333333";
		menu3.style.display = "none";
	}
	menu3.onmouseenter = function(){
		menu3.style.display = "block";
	}
	menu3.onmouseleave = function(){
		menu3.style.display = "none";
	}
}

//小米明星单品(点击事件)
var lbtna = document.getElementsByClassName("lbtna")[0];
var rbtna = document.getElementsByClassName("rbtna")[0];
var starlun = document.getElementsByClassName("starlun")[0];
setInterval(function(){
	setTimeout(function(){
		animate(starlun,{left:-1220},10)
	},3000)
	setTimeout(function(){
		animate(starlun,{left:0},10)
	},6000)
},6000)
rbtna.onclick = function(){
	animate(starlun,{left:-1220},10)
}
lbtna.onclick = function(){
	animate(starlun,{left:0},10)
}
/*---------智能硬件----------*/
var star2 = document.querySelectorAll(".star2right ul li");
var star2left = document.querySelector(".star2left");
for(var i = 0;i<star2.length;i++){
	star2[i].index=i;
	star2[i].onmouseenter = function(){
		this.style.top = "-5"+"px";
	}
	star2[i].onmouseleave = function(){
		this.style.top = "0"+"px";
	}
}
star2left.onmouseenter = function(){
	this.style.top = "-5"+"px";
}
star2left.onmouseleave = function(){
	this.style.top = "0"+"px";
}
/*-----------搭配-------------*/
var star3li = document.getElementsByClassName("star3li");
var a1btn = document.querySelector(".star3_a1");
var a2btn = document.querySelector(".star3_a2");
var a3btn = document.querySelector(".star3_a3");
var a4btn = document.querySelector(".star3_a4");
var star30 = document.querySelector(".star30");
var star31 = document.querySelector(".star31");
var star32 = document.querySelector(".star32");
var star33 = document.querySelector(".star33");
var pingjia = document.querySelectorAll(".pingjia")
var starli = document.querySelectorAll(".star3_1 ul li")
for(var i =0;i<star3li.length;i++){
	star3li[i].index=i;
	star3li[i].onmouseenter = function(){
		animate(pingjia[this.index],{top:-44},10);
	}
	star3li[i].onmouseleave = function(){
		animate(pingjia[this.index],{top:36},10);
	}
}
a1btn.onmouseenter = function(){
	star30.style.display="block";
	star31.style.display="none";
	star32.style.display="none";
	star33.style.display="none";
}
a2btn.onmouseenter = function(){
	star30.style.display="none";
	star31.style.display="block";
	star32.style.display="none";
	star33.style.display="none";
}
a3btn.onmouseenter = function(){
	star30.style.display="none";
	star31.style.display="none";
	star32.style.display="block";
	star33.style.display="none";
}
a4btn.onmouseenter = function(){
	star30.style.display="none";
	star31.style.display="none";
	star32.style.display="none";
	star33.style.display="block";
}
/*----------为你推荐-------------*/
var lbtns = document.querySelector(".lbtns");
var rbtns = document.querySelector(".rbtns");
var star4_1 = document.querySelector(".star4_1");
rbtns.onclick = function(){
	animate(star4_1,{left:-1200},10)
}
lbtns.onclick = function(){
	animate(star4_1,{left:0},10)
}